<template>
  <div class="container-header-margin content">
    <div style="display: flex;">
      <div class="flex pt-20 pl-20 pr-20">
        <a-input v-model:value="query.name" placeholder="搜索名称" style="width: 300px" allowClear /><a-button
          type="primary" class="ml-20" @click="getList()">立即搜索</a-button>
      </div>
      <div class="flex pt-20 pl-20 pr-20">
        <a-select v-model:value="query.status" placeholder="搜索比赛状态" style="width: 300px" allowClear>
          <a-select-option v-for="item in raceStatus" :key="item.dictValue" :value="item.dictValue">
            {{ item.dictLabel }}
          </a-select-option>
        </a-select>
        <a-button type="primary" class="ml-20" @click="getList()">立即搜索</a-button>
      </div>
    </div>

    <div class="ml-20 mr-20 mt-20 type pr-20 pl-20 pt-10 pb-10" v-if="typeList && typeList[0]">
      <div>
        <span v-for="item in pTypeList" :key="item.id" style="margin: 5px; cursor: pointer; font-weight: bold"
          :class="{ active: item.id === pType }" @click="setPType(item.id)">{{ item.name }}</span>
      </div>
      <div class="mt-10 pl-20" v-if="cTypeList && cTypeList[0]">
        <span v-for="item in cTypeList" :key="item.id" style="margin: 5px; cursor: pointer"
          :class="{ active: item.id === cType }" @click="setCType(item.id)">{{ item.name }}</span>
      </div>
    </div>
    <a-spin :spinning="spinning" size="large" style="text-align: center">
      <div v-if="raceList && raceList[0]">
        <div v-for="item in raceList" :key="item.id" class="race-item" style="">
          <a-badge-ribbon :text="item.isJoin === 1 ? '已报名' : '未报名'" :color="item.isJoin === 1 ? 'red' : ''">
            <a-card title="" size="small">
              <div class="titleFlex pr-20">
                <div style="cursor: pointer;" @click="toRaceDetail(item.id)">
                  <span style="font-size: 20px; font-weight: bold">{{
                    item.name
                  }}</span>

                  <span class="ml-10 desc" v-if="item.parentName">---{{ item.parentName
                  }}<span v-if="item.sonName">-{{ item.sonName }}</span></span>
                  <a-tag color="pink" class="ml-10" v-if="raceLevel && raceLevel[0] && item.level">{{
                    getRaceLevels(item.level).dictLabel }}</a-tag>
                  <a-tag color="red" class="ml-10" v-if="raceStatus && raceStatus[0] && item.status">{{
                    getRaceStatuss(item.status).dictLabel }}</a-tag>
                </div>
                <div style="width: 10%">
                  <a-button type="link" @click="toRaceDetail(item.id)">查看详情</a-button>
                </div>
              </div>
              <div class="desc mt-10">
                <span>报名时间：{{ item.joinStart }}至{{ item.joinEnd }}</span>
                <span class="ml-20">比赛时间：{{ item.raceStart }}至{{ item.raceEnd }}</span>
                <span class="ml-20">发布时间：{{ item.createTime }}</span>
              </div>
            </a-card>
          </a-badge-ribbon>
        </div>
        <div style="text-align: right" class="pt-20 pr-20">
          <a-pagination v-model:current="query.pageNum" show-quick-jumper :total="query.total"
            v-model:pageSize="query.pageSize" :pageSizeOptions="['10', '20', '30', '40', '50']" @change="getList" />
        </div>
      </div>
      <div v-if="raceList.length === 0" class="mt-30">
        <a-empty />
      </div>
    </a-spin>
  </div>
</template>

<script setup>
import { useUserStore } from "@/store/user";
import { SYSYTM_TITLE } from "@/config";
import { race_list, race_type_list, getRaceStatus, getRaceLevel } from "@/apis";
import { message } from "ant-design-vue";
const router = useRouter();
const user = useUserStore();
// console.log("user", user.userInfo.isTeacher);
useSeoMeta({
  title: "赛事列表-" + SYSYTM_TITLE,
  description: SYSYTM_TITLE,
  keywords: "白云学院,创新创业网",
  robots: "index, follow",
  canonical: "https://example.com",
});

const raceList = ref([]);

const typeList = ref([]);
const pTypeList = ref([]);
const pType = ref("");
const cTypeList = ref([]);
const cType = ref("");
const isMessage = ref(false);
const raceLevel = ref([]);
const raceStatus = ref([]);

const spinning = ref(false);

const query = ref({
  name: "",
  status: "",
  pageNum: 1,
  pageSize: 10,
  total: 0,
  parentTid: undefined,
  sonTid: undefined,
});

function setCType(id) {
  if (cType.value === id) {
    cType.value = "";
  } else {
    cType.value = id;
  }
  getList();
  if (!isMessage.value) {
    message.success("筛选成功,再次点击相同栏目可取消筛选");
    isMessage.value = true;
  }
}
function setPType(id) {
  if (pType.value === id) {
    pType.value = "";
    cTypeList.value = [];
  } else {
    pType.value = id;
    cTypeList.value = typeList.value.filter((item) => item.parentId === id);
  }
  cType.value = "";
  getList();
  if (!isMessage.value) {
    message.success("筛选成功,再次点击相同栏目可取消筛选");
    isMessage.value = true;
  }
}

function toRaceDetail(id) {
  switch (id) {
    case 1:
      router.push({ path: "/ss/lqb", query: { id: id } });
      break;
    case 5:
      router.push({ path: "/ss/dc", query: { id: id } });
      break;
    default:
      message.error('暂未开放')
      break;
  }
}

function getTypeList() {
  race_type_list().then((res) => {
    typeList.value = res.data;
    console.log("typeList", typeList.value);
    pTypeList.value = typeList.value.filter((item) => item.parentId === 0);

  });
}

function getList() {
  spinning.value = true;
  query.value.parentTid = pType.value;
  query.value.sonTid = cType.value;
  race_list(query.value)
    .then((res) => {
      spinning.value = false;
      raceList.value = res.rows;
      query.value.total = res.total;
    })
    .catch((err) => {
      spinning.value = false;
    });
}
function getRaceStatuss(data) {
  if (!raceStatus.value) {
    return {};
  }
  return raceStatus.value.find((item) => item.dictValue === data + "");
}
function getRaceLevels(data) {

  console.log(data);

  console.log(raceLevel.value);
  if (!raceLevel.value) {
    return {};
  }
  console.log(raceLevel.value.find((item) => item.dictValue === data + ""));

  return raceLevel.value.find((item) => item.dictValue === data + "");
}
function getRaceLevelList() {
  getRaceLevel().then((res) => {
    raceLevel.value = res.rows;
  });
}
function getRaceStatusList() {
  getRaceStatus().then((res) => {
    console.log("raceStatus", res);
    raceStatus.value = res.rows;
  });
}

getRaceStatusList();
getRaceLevelList();
getList();
getTypeList();
</script>

<style scoped lang="less">
@import "@/assets/css/main.less";

.flex {
  display: flex;
  align-items: center; // 垂直居中对齐
  // justify-content: space-between; // 两端对齐，确保按钮在一行的末尾
  // padding: 20px; // 添加内边距
}

.titleFlex {
  display: flex;
  justify-content: space-between;
}

.race-item {
  padding: 30px;
  border-bottom: 1px solid #ccc;
  // display: flex;
  // flex-direction: row; // 默认为水平排列
  // align-items: center; // 垂直居中对齐
}

.desc {
  color: #999;
  font-size: 14px;
}

.type {
  background: @container-header-color;
  color: white;
  border-radius: 4px;
}

.active {
  color: @container-header-active-color;
}

// 媒体查询，针对手机端
@media (max-width: 768px) {
  .titleFlex {
    display: flex;
    // flex-direction: column; // 在小屏幕上改为垂直排列
    justify-content: flex-start; // 左对齐
  }

  .btn {
    margin-top: 10px; // 增加与上方内容的间距
    width: 100%; // 使按钮在手机端全宽
  }
}
</style>